/**
 * mengshx
 * 封装了element-ui的el-table和分页组件
 */
/**

 */
import {Table} from 'element-ui';
import request from '@/utils/request'
export default {
  name: "ghTable",
  data() {
    return {
      tableData: [],
      paginations:{
        pageNum:1,
        pageSize:10,
        total:100
      },
      myLoading:false
    }
  },
  props: {
    ...Table.props,
    columns: {
      type: Array,
      default: () => []
    },
    api: {
      type: [String,Function],
      default: ""
    },
    data:{
      type:Array,
      default:()=>[]
    },
    query:{
      type:Object,
      default:()=>{}
    },
  },
  created() {
    this.getList();
  },
  methods: {
    reload(){
      this.getList()
    },
    reset(){
      this.paginations.pageNum=1
      this.getList()
    },
    getList(){
      if(!this.api) return;
      this.myLoading = true;
      let page={pageNum:this.paginations.pageNum,pageSize:this.paginations.pageSize}
      let queryParam={...this.query,...page,}
      let promise=null;
      if(this.api instanceof Function){
        promise= this.api(queryParam)
      }
      if(this.api instanceof String){
        promise= request({
          url: this.api,
          method: 'get',
          params: queryParam
        })
      }
        promise.then(response=>{
        response=response.data
        this.tableData = response.records;
          this.paginations.total = response.total;
        this.myLoading = false;
      }).catch((e) => {
          console.log(e)
        })
    },
    getSlot(key) {
      let obj = {};
      let slot = this.$scopedSlots[key]
      if (slot) {
        obj["default"] = slot
      }
      return obj;
    },
    handleSizeChange(size){
      this.paginations.pageSize=size;
      this.getList()
    },
    handleCurrentChange(current){
      this.paginations.pageNum=current
      this.getList()
    },
  },
  watch:{
    data(value1){
      this.tableData=value1
    },

  },
  render() {
    const props = {}
    Object.keys(Table.props).forEach(k => {
      if ("data" == k) {
        props[k] = this["tableData"]
        return
      }
      this[k] && (props[k] = this[k]);
    })
    const directives = [
      { name: 'loading', value: this.myLoading, modifiers: { fullscreen: false } },
    ];

    let column = JSON.parse(JSON.stringify(this.columns))
    let culumnNodes = column.map(props => {
      let slotObj= this.getSlot(props["slot"]);
       return (<el-table-column  {...{props,scopedSlots:{...slotObj}}} >
        </el-table-column>)
      }
    )

    let page_props = {
      on: {
        'size-change': val => {
          this.handleSizeChange(val);
        },
        'current-change': val => {
          this.handleCurrentChange(val);
        },
        'update:pageNum':(val,val2)=>{
          this.paginations.pageNum=val
        }
      },
    };
  // :current-page.sync="pageNum"
    return (
      <div>
        <el-table {...{props,directives}}    style="width: 100%">
          {culumnNodes}
        </el-table>
         <el-pagination
           {...page_props}
        onSizeCchange={this.handleSizeChange}
        onCurrentChange={this.handleCurrentChange}
        current-page={this.paginations.pageNum}
        page-sizes={[10, 20, 30]}
        page-size={this.paginations.pageSize}
        layout="total, sizes, prev, pager, next, jumper"
        total={this.paginations.total}
           v-show={this.api}
         >
</el-pagination>
      </div>
    )
  }
}
